<template>
  <div>
    <e-upload
      :show-upload-list="false"
      :on-success="handleSuccess"
      :on-exceeded-size="handleMaxSize"
      :on-format-error="handleFormatError"
      :before-upload="handleBeforeUpload"
      ref="upload"
      multiple
      :format="['jpg','jpeg','png']"
      :max-size="2048"
      type="drag"
      action="//jsonplaceholder.typicode.com/posts/"
      class="demo-upload-button">
      <div class="inner">
        <e-icon
          size="17"
          type="plus"></e-icon>
        <p>上传</p>
      </div>
    </e-upload>
    <div
      class="demo-upload-list"
      v-for="(item,index) in uploadList"
      :key="index">
      <template v-if="item.status === 'finished'">
        <img :src="item.url">
        <e-icon
          class="close-round-icon"
          type="clear"
          size="14"
          @click.enter="handleRemove(index)">
        </e-icon>
      </template>
      <template v-else>
        <div class="uploading">
          <div>上传中...</div>
          <e-progress
            style="width:70% ; margin: 0 auto"
            :stroke-width= "7"
            stroke-color="#337DFF"
            v-if="item.showProgress"
            :percent="item.percentage"
            hide-info></e-progress>
        </div>
        <e-icon
          class="close-round-icon"
          type="clear"
          size="14"
          @click.enter="handleRemove(item)">
        </e-icon>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
const visible = ref(false);
let uploadList = ref([]);
let currentInstance = '';

onMounted(() => {
  currentInstance = getCurrentInstance();
  uploadList.value = currentInstance.ctx.$refs.upload.fileList
});

const handleRemove = (index) => {
  uploadList.value.splice(index, 1);
};
const handleSuccess = (res, file) => {
  file.url = 'https://file.iviewui.com/images/image-demo-2.jpg';
  file.name = '7eb99afb9d5f317c912f08b5212fd69a'
};
const handleMaxSize = (file) => {
  currentInstance.proxy.$Message.warning({
    content: `File${file.name}' is too large, no more than 2M.`,
    duration: 1.5,
  });
}
const handleFormatError = (file) => {
  currentInstance.proxy.$Message.warning({
    content: `File format of ${file.name}is incorrect, please select jpg or png.`,
    duration: 1.5,
  });
}
const handleBeforeUpload = () => {
  const check = uploadList.value.length < 5
  if (!check) {
    currentInstance.proxy.$Message.warning({
      content: 'Up to five pictures can be uploaded.',
      duration: 1.5
    })
  }
  return check
}
</script>

<style  scoped lang="less">
  .demo-upload-button {
    display: inline-block;
    width:100px;
    height: 100px;
    .inner {
      display:flex;
      height: 100px;
      justify-content: center;
      flex-direction: column;
      background:rgba(0,0,0,0.02);
      & > p {
        color:#555555;
      }
    }
  }
.demo-upload-list{
        display: inline-block;
        width: 100px;
        height: 100px;
        text-align: center;
        border: 1px dashed #D9D9D9;
        margin-left:20px ;
        overflow: hidden;
        background: #fff;
        position: relative;
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .close-round-icon{
        position: absolute;
        top: 5px;
        right: 5px;
        color:#999999;
        cursor: pointer;
    }
    .uploading{
      display:flex;
      height: 100px;
      color:#999999;
      justify-content: center;
      flex-direction: column;
    }
</style>
